<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>vue车牌号键盘</title>
    <link rel="stylesheet" href="css/css.css"/>
    <script type="application/javascript" src="js/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div class="content-car-number">
        <div class="car-content-title">
            <span>请输入车牌</span>
            <label v-if="!WJ" class="ze-checkbox">
                <input type="checkbox" v-model="checkbox" @change="carTypeChange">
                <span class="ze-checkbox-text">新能源</span>
            </label>
        </div>
        <div class="content-section">
            <div class="content-section-flex flex-card">
                <div class="content-section-flex flex-card-border">
                    <button id="font" @click="btnClickYue" :class="{isClick: isYue }">
                        {{areaName}}
                    </button>
                    　　　　　　　　　　
                    <button id='letter' @click="btnClickA" :class="{isClick: isA}">
                        {{areaLetter}}
                    </button>
                    　　　　　　　　　　　　　　　　
                    　　　　　　　　　　　　
                    <button id='numOne' @click="btnClickNum('one')" :class="{isNumClick: isNumOne }">
                        {{numOne}}
                    </button>
                    　　　　　　　　　　　　
                    <button id='numTwo' @click="btnClickNum('two')" :class="{isNumClick: isNumTwo }">
                        {{numTwo}}
                    </button>
                    　　　　　　　　　　　　
                    <button id='numThree' @click="btnClickNum('three')" :class="{isNumClick: isNumThree }">
                        {{numThree}}
                    </button>
                    　　　　　　　　　　　　
                    <button id='numFour' @click="btnClickNum('four')" :class="{isNumClick: isNumFour }">
                        {{numFour}}
                    </button>
                    　　　　　　　　　　　　
                    <button id='numFive' @click="btnClickNum('five')" :class="{isNumClick: isNumFive }">
                        {{numFive}}
                    </button>
                    　　　　　　　　　　　　
                    <button v-if="checkbox" id='numSix' @click="btnClickNum('six')"
                            :class="{isNumClick: isNumSix }">{{numSix}}
                    </button>
                    　　　
                    　　　　　　　
                </div>
                　　　　　
            </div>
            　
        </div>
    </div>
    <div class="keyboard" v-if="keyboardShow" :class='{animationDown:isDown,animationUp:isUp}'>
        　　
        <button class="btn-complete" @click="completeClick"><span>完成</span></button>
        　　
        <div v-if="keyboard == 'txt'">
            　　　　
            <div class="keyboard-row" v-for="(item,rows) in carTxt">
                　　　　　　
                <button class="keyboard-row-item" v-for="(i,index) in item.name" @click="btnWordClick(rows,index,i)">
                    {{i}}
                </button>
                　　　　
            </div>
            　　　　
            <div class="keyboard-row">
                　　　　　　
                <button class="keyboard-row-item bottom" @click="btnBottomClick('新')">新</button>
                　　　　　　
                <button class="keyboard-row-item bottom" @click="btnBottomClick('临')">临</button>

                <button class="keyboard-row-item bottom" @click="btnBottomClick('W')">W</button>
                　　　　　　
                <button v-for="j in noneBottomtxt" class="none-botton">{{j}}</button>
                　　　　　　
                <div class="keyboard-row-item clear" @click="clearClick">删除</div>
                　　　　
            </div>
            　　
        </div>
        　　
        <div v-if="keyboard == 'num'">
            　　　　
            <div class="keyboard-row" v-for="(item,rows) in carNum">
                　　　　　　
                <button :disabled="!isSelectl?isDisable && i<10 :isDisable&& rows!=0 " class="keyboard-row-item"
                        v-for="(i,index) in item.name" @click="btnWordClick(rows,index,i)">{{i}}
                    　　　　　　
                </button>
                　　　　
            </div>
            　　　　
            <div class="keyboard-row">
                　　　　　　
                <button :disabled="isSelectl" v-for="item in carNumBottom" class="keyboard-row-item bottom"
                        @click="btnBottomNumClick(item)">{{item}}
                </button>
                　　　　　　
                <button v-for="j in noneBottom" class="none-botton">{{j}}</button>
                　　　　　　
                <div class="keyboard-row-item clear" @click="clearClick">删除</div>
                　　　
            </div>
            　　
        </div>

        <div v-if="keyboard == 'txt2'">
            　　　　
            <div class="keyboard-row" v-for="(item,rows) in carTxt">
                　　　　　　
                <button class="keyboard-row-item" v-for="(i,index) in item.name" @click="btnBottomNumClick(i)">
                    {{i}}
                </button>
                　　　　
            </div>
            　　　　
            <div class="keyboard-row">
                　　　　　　
                <button class="keyboard-row-item bottom" @click="btnBottomClick('新')">新</button>
                　　　　　　
                <div class="keyboard-row-item clear" @click="clearClick">删除</div>
                　　　　
            </div>
            　　
        </div>
    </div>

    <div @click="addCar" class="submitBtn">立即绑定</div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            checkbox: false,
            WJ: false,
            isDown: false,
            isUp: false,
            selected: null,
            isSelectx: false,
            isSelectl: false,
            key: '1',
            areaName: '',
            areaLetter: '',
            numOne: '',
            numTwo: '',
            numThree: '',
            numFour: '',
            numFive: '',
            numSix: '',
            isYue: false,
            keyboardShow: false,
            keyboard: false,
            isA: false,
            isNumOne: false,
            isNumTwo: false,
            isNumThree: false,
            isNumFour: false,
            isNumFive: false,
            isNumSix: false,
            isDisable: false,
            carTxt: [
                {name: ['粤', '京', '冀', '沪', '津', '晋', '蒙', '辽', '吉', '黑']},
                {name: ['苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '桂']},
                {name: ['琼', '渝', '川', '贵', '云', '藏', '陕', '甘', '青', '宁']}
            ],
            carNumBottom: ['W', 'X', 'Y', 'Z'],
            noneBottom: ['', '', '', ''],
            noneBottomtxt: ['', '', '', '', '', ''],
            carNum: [
                {name: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0']},
                {name: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K']},
                {name: ['L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V']}
            ],
            addedCarNum: ''
        },
        watch: {
            checkbox: function (val, oldval) { //监听是否为新能源
                this.isNumOne = false;
                this.isNumTwo = false;
                this.isNumThree = false;
                this.isNumFour = false;
                this.isNumFive = false;
                this.isNumSix = false;
                const vm = this;
                if (!val) {
                    // 切换到普通车牌
                    if (vm.numFour) {
                        vm.isNumFive = true;
                        vm.key = 7;
                    }
                } else {
                    // 切换到新能源车牌
                    if (vm.numFive) {
                        vm.isNumSix = true;
                        vm.key = 8;
                    }
                }
            }
            ,
            numFive: function (val) { //监听是否为普通车牌最后一位
                if (!this.checkbox && val) {
                    this.isUp = false;
                    this.isDown = true;
                    this.keyboardShow = false;
                    this.isNumFive = false;
                }
            }
            ,
            numSix: function (val) { //监听是否为新能源车牌最后一位
                if (this.checkbox && val) {
                    this.isUp = false;
                    this.isDown = true;
                    this.keyboardShow = false;
                    this.isNumSix = false;
                }
            }
        },
        methods: {
            carTypeChange: function (val) {         // 车牌类型切换
                this.isNumOne = false;
                this.isNumTwo = false;
                this.isNumThree = false;
                this.isNumFour = false;
                this.isNumFive = false;
                this.isNumSix = false;
                if (!val) {
                    // 切换到普通车牌
                    if (this.numFour) {
                        this.isNumFive = true;
                        this.key = 7;
                    }
                } else {
                    // 切换到新能源车牌
                    if (this.numFive) {
                        this.isNumSix = true;
                        this.key = 8;
                    }
                }
            }
            ,
            btnClickYue: function () { // 车牌号第一位输入框选择
                this.isYue = true;
                this.isA = false;
                this.isUp = true;
                this.isNumOne = false;
                this.isNumTwo = false;
                this.isNumThree = false;
                this.isNumFour = false;
                this.isNumFive = false;
                this.isNumSix = false;
                this.keyboardShow = true;
                this.keyboard = 'txt';
                this.key = 1;
            }
            ,
            btnWordClick: function (rows, index, i) {    // 键盘选择显示
                this.selected = i;
                if (this.key === 1) {
                    if (this.areaName === '临') {
                        this.areaLetter = '';
                        this.numOne = '';
                        this.numTwo = '';
                        this.numThree = '';
                        this.numFour = '';
                        this.numFive = '';
                        this.numSix = '';
                    }
                    this.areaName = i;
                    this.isSelectl = false;
                    document.getElementById('letter').click();
                } else if (this.key === 2) {
                    this.areaLetter = i;
                    document.getElementById('numOne').click();
                } else if (this.key === 3) {
                    this.numOne = i;
                    document.getElementById('numTwo').click();
                } else if (this.key === 4) {
                    this.numTwo = i;
                    document.getElementById('numThree').click()
                } else if (this.key === 5) {
                    this.numThree = i
                    document.getElementById('numFour').click();
                } else if (this.key === 6) {
                    this.numFour = i;
                    document.getElementById('numFive').click();
                } else if (this.key === 7) {
                    this.numFive = i;
                    if (this.checkbox) {
                        document.getElementById('numSix').click();
                    }
                } else if (this.key === 8) {
                    this.numSix = i;
                }
                if (this.key === 7 || this.key === 8) {
                    this.carNumBottom = ['W', 'X', 'Y', 'Z', '港', '澳', '学'];
                    this.noneBottom = [''];
                } else if (this.key === 3 || this.key === 4 || this.key === 5 || this.key === 6) {
                    this.carNumBottom = ['W', 'X', 'Y', 'Z'];
                    this.noneBottom = ['', '', '', ''];
                }
            }
            ,
            btnBottomClick: function (val) {    // 车牌第一位选择‘临’,’新‘后的键盘显示
                if (val === '新') {
                    if (this.areaName === '临') {
                        this.areaLetter = '';
                        this.numOne = '';
                        this.numTwo = '';
                        this.numThree = '';
                        this.numFour = '';
                        this.numFive = '';
                        this.numSix = '';
                    }
                    this.areaName = '新';
                    this.isSelectx = true;
                    this.isSelectl = false;
                    document.getElementById('letter').click();
                } else if (val === 'W') {
                    this.areaLetter = 'J';
                    if (this.areaName === '临') {
                        this.numOne = '';
                        this.numTwo = '';
                        this.numThree = '';
                        this.numFour = '';
                        this.numFive = '';
                        this.numSix = '';
                    }
                    this.areaName = 'W';
                    this.isSelectx = true;
                    this.isSelectl = false;
                    document.getElementById('numOne').click();
                } else if (val === '临') {
                    this.areaName = '临';
                    this.isSelectl = true;
                    this.isSelectx = false;
                    this.isDisable = true;
                    this.areaLetter = '';
                    this.numOne = '';
                    this.numTwo = '';
                    this.numThree = '';
                    this.numFour = '';
                    this.numFive = '';
                    this.numSix = '';
                    document.getElementById('letter').click('isLin');
                }
            }
            ,
            btnBottomNumClick: function (i) {    // 键盘最后一行字母点击事件
                this.selected = i;
                if (this.key === 2) {
                    this.areaLetter = i;
                    document.getElementById('numOne').click();
                } else if (this.key === 3) {
                    this.numOne = i;
                    document.getElementById('numTwo').click();
                } else if (this.key === 4) {
                    this.numTwo = i;
                    document.getElementById('numThree').click();
                } else if (this.key === 5) {
                    this.numThree = i;
                    document.getElementById('numFour').click();
                } else if (this.key === 6) {
                    this.numFour = i;
                    document.getElementById('numFive').click();
                } else if (this.key === 7) {
                    this.numFive = i;
                    if (this.checkbox) {
                        document.getElementById('numSix').click();
                    }
                } else if (this.key === 8) {
                    this.numSix = i;
                }
            }
            ,
            btnClickA: function () { // 车牌号第二位输入框选择
                this.checkbox = this.areaName == 'W' ? true : false;
                this.WJ = this.areaName == 'W' ? true : false;
                this.isDisable = true;
                this.isA = true;
                this.isYue = false;
                this.isUp = true;
                this.isNumOne = false;
                this.isNumTwo = false;
                this.isNumThree = false;
                this.isNumFour = false;
                this.isNumFive = false;
                this.isNumSix = false;
                this.keyboardShow = true;
                this.keyboard = 'num';
                this.key = 2;
                if (this.WJ) {
                    document.getElementById('numOne').click();
                }
            }
            ,
            btnClickNum: function (name) {    // 车牌号后五位或六位输入框选择

                if (this.isSelectl) {
                    this.isDisable = true;
                } else {
                    this.isDisable = false;
                }
                this.keyboard = 'num';
                this.keyboardShow = true;
                this.isYue = false;
                this.isA = false;
                this.isNumOne = false;
                this.isNumTwo = false;
                this.isNumThree = false;
                this.isNumFour = false;
                this.isNumFive = false;
                this.isNumSix = false;
                this.isUp = true;
                this.checkbox = this.areaName == 'W' ? true : false;
                this.WJ = this.areaName == 'W' ? true : false;
                if (name === 'one') {
                    this.keyboard = this.areaName == 'W' ? 'txt2' : 'num';
                    this.isNumOne = true;
                    this.key = 3;
                } else if (name === 'two') {
                    this.isNumTwo = true;
                    this.key = 4;
                } else if (name === 'three') {
                    this.isNumThree = true;
                    this.key = 5
                } else if (name === 'four') {
                    this.isNumFour = true;
                    this.key = 6;
                } else if (name === 'five') {
                    this.isNumFive = true;
                    this.key = 7;
                } else if (name === 'six') {
                    this.isNumSix = true;
                    this.key = 8;
                }
                if (name === 'five' || name === 'six') {
                    this.carNumBottom = ['W', 'X', 'Y', 'Z', '港', '澳', '学'];
                    this.noneBottom = [''];
                } else {
                    this.carNumBottom = ['W', 'X', 'Y', 'Z'];
                    this.noneBottom = ['', '', '', ''];
                }
            }
            ,
            completeClick: function () {    // 键盘点击‘完成’
                this.isYue = false;
                this.isA = false;
                this.isNumOne = false;
                this.isNumTwo = false;
                this.isNumThree = false;
                this.isNumFour = false;
                this.isNumFive = false;
                this.isNumSix = false;
                this.isUp = false;
                this.isDown = true;
                this.keyboardShow = false;
            }
            ,
            clearClick: function () {  // 键盘点击‘删除图标’
                if (this.key === 1) {
                    this.areaName = '';
                } else if (this.key === 2) {
                    document.getElementById('font').click();
                    this.areaLetter = '';
                } else if (this.key === 3) {
                    document.getElementById('letter').click();
                    this.numOne = '';
                } else if (this.key === 4) {
                    document.getElementById('numOne').click();
                    this.numTwo = '';
                } else if (this.key === 5) {
                    document.getElementById('numTwo').click();
                    this.numThree = '';
                } else if (this.key === 6) {
                    document.getElementById('numThree').click();
                    this.numFour = '';
                } else if (this.key === 7) {
                    document.getElementById('numFour').click();
                    this.numFive = '';
                } else if (this.key === 8) {
                    document.getElementById('numFive').click();
                    this.numSix = '';
                }
            }
            ,
            addCar: function () {
                var num;
                if (!this.checkbox) {
                    num = this.areaName + this.areaLetter + this.numOne + this.numTwo + this.numThree + this.numFour + this.numFive;
                } else if (this.checkbox) {
                    num = this.areaName + this.areaLetter + this.numOne + this.numTwo + this.numThree + this.numFour + this.numFive + this.numSix;
                }
                if (num === '') {
                    alert('请输入车牌');
                } else if (!this.checkbox && (this.areaName === '' || this.areaLetter === '' || this.numOne === '' || this.numTwo === '' || this.numThree === '' || this.numFour === '' || this.numFive === '')) {
                    //普通车牌
                    alert('请输入完整车牌');
                } else if (this.checkbox && (this.areaName === '' || this.areaLetter === '' || this.numOne === '' || this.numTwo === '' || this.numThree === '' || this.numFour === '' || this.numFive === '' || this.numSix === '')) {
                    //新能源车牌
                    alert('请输入完整车牌');
                } else {
                    alert(num);
//                    todo:提交

                }
            }
        }
    });
</script>
</body>
</html>